<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级专业">
            <treeselect
              v-model="form.parentId"
              :options="specialtyOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级专业"
            ></treeselect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业名称" prop="specialtyName">
            <el-input v-model="form.specialtyName" placeholder="请输入专业名称" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择状态" size="small" style="width: 100%;">
              <el-option
                v-for="dict in specialtyStateOptions"
                :key="dict.code"
                :label="dict.name"
                :value="dict.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业类型" prop="specialtyType">
            <el-select v-model="form.specialtyType" placeholder="请选择专业类型" size="small" style="width: 100%;">
              <el-option
                v-for="dict in specialtyTypeOptions"
                :key="dict.code"
                :label="dict.name"
                :value="dict.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" style="float:right" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" size="mini" @click="submitForm">保 存</el-button>
      <el-button :loading="buttonLoading" size="mini" @click="cancelDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import Treeselect from "@riophae/vue-treeselect";
  import {addSpecialty, getSpecialtyById, listSpecialty, updateSpecialty} from "@/api/question/specialtyTree";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "specialty",
    props: {
      inputDialogData: Object,
      specialtyStateOptions: Object,
      specialtyTypeOptions: Object,

    },
    components: {
      Treeselect,
    },
    data() {
      return {
        //专业状态字典状态
        // specialtyStateOptions: [],
        //专业类型字典状态
        // specialtyTypeOptions: [],
        //专业树选项
        specialtyOptions: [],
        //专业树表单
        form: {},
        buttonLoading: false,
        // 表单校验
        rules: {
          specialtyName: [
            {required: true, message: "专业名称不能为空", trigger: "blur"}
          ],
          orderNum: [
            {required: true, message: "显示排序不能为空", trigger: "blur"}
          ],
          status: [
            {required: true, message: "状态不能为空", trigger: "change"}
          ],
          specialtyType: [
            {required: true, message: "专业类型不能为空", trigger: "change"}
          ]
        }
      }
    },
    created() {
      /*this.getDicts("specialty_status").then(response => {
        this.specialtyStateOptions = response.responseBody.result;
      });
      this.getDicts("specialty_type").then(response => {
        this.specialtyTypeOptions = response.responseBody.result;
      })*/
    },
    methods: {
      //修改时传id，新增时传row
      init(id, row) {
        this.getTreeSelect();
        //判断新增时是否有父级菜单，如果有则采用当前父id，否则父id设置为0
        if (row != null && row.specialtyId) {
          this.form.parentId = row.specialtyId;
        } else {
          this.form.parentId = 0;
        }

        if (id) {//id存在则为修改
          getSpecialtyById(id).then(response => {
            this.form = response.responseBody;
          });
        }
      },
      //查询专业树结构
      getTreeSelect() {
        listSpecialty(
                {'searchParams': {}}
        ).then(response => {
          this.specialtyOptions = [];
          const specialty = {specialtyId: 0, specialtyName: "主类目", children: []};
          specialty.children = this.getPrimarySpecialty(response.responseBody.result);
          this.specialtyOptions.push(specialty);
        })
      },
      //仅获取主类目专业
      getPrimarySpecialty(data) {
        //深度克隆
        let cloneData = JSON.parse(JSON.stringify(data));
        //获取一级专业
        return cloneData.filter(item => {
          return item.parentId == 0;
        })
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.specialtyId,
          label: node.specialtyName,
          children: node.children
        };
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true
            if (this.form.specialtyId != undefined) {
              updateSpecialty(this.form).then(response => {
                if (response.retCode === '200') {
                  this.msgSuccess(response.message);
                }
                // this.msgSuccess("修改成功");
                this.$emit("cancelDialog");
                this.$emit("submitForm");
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addSpecialty(this.form).then(response => {
                if (response.retCode === '200') {
                  this.msgSuccess(response.message);
                }
                // this.msgSuccess("新增成功");
                this.$emit("cancelDialog");
                this.$emit("submitForm");
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      cancelDialog() {
        this.$emit("cancelDialog");
      }
    }
  }
</script>
<style scoped>

</style>
